var comicViewer = (function($) {
	var maxLeftMargin = 0,
		moveLeft = true,
		moveRight = false,
		_marginLeft = 0,
		_defaultMoveMargin = 0;
		comicStripLeftMargin = 0,
		$comicStripContainer = null,
		$comicStrip = null,
		$comicContainer = null;
		
	return {
		initialize: function( config ) {
			config = config ? config : {};
			
			$comicStripContainer = $( '#comic-strip-container' );
			$comicStrip = $( '#comic-strip' );
			$comicContainer = $( '#comic-container' );
			
			comicViewer.initializeComicOptions();
			
			comicViewer.calculateImageStrip();
			comicViewer.setUpComicStrip();
			
			// set the imageView height
			$( '#imageViewer' ).height($( document ).height() - $( '#container' ).height() - 20);
			
		},
		// --- re-factor this before using it ---
		//reposition: function() {
		//	$( '#container' ).css( 'margin-top', ($( window ).height() - $( '#container' ).height()) );
		//},
		
		initializeComicOptions: function() {
			// set up the gallery icon button
			$( '#gallery-icon' ).toggle(function() {
				// reset the imageViewer height
				$( '#imageViewer' ).height($( '#imageViewer' ).height() + $comicContainer.height());
				
				$comicContainer.hide();						
				$( '#gallery-icon' ).attr( 'title', 'Show Comic Strip.' );
				$( '.gallery-icon-cell' ).css( 'background-color', 'grey' );
			}, function() {
				// reset the imageViewer height
				$( '#imageViewer' ).height($( '#imageViewer' ).height() - $comicContainer.height());
				
				$comicContainer.show();
				$( '#gallery-icon' ).attr( 'title', 'Hide Comic Strip. Press Esc. to close.' );
				$( '.gallery-icon-cell' ).css( 'background-color', 'white' );
				$( '#comic-strip-container' ).width( $( '#comic-container' ).width() - 24);
			});
		},
		
		calculateImageStrip: function() {
			var imageStrip = 0;
			
			$( '#comic-strip > img' ).each(function(index, image) {
				imageStrip += ($(image).width() + 8);
			});
			$comicStrip.width(imageStrip);
		},
		
		convertPixelStringToNumber: function(pixels) {
			return parseInt(pixels.replace('px', ''));
		},
		
		setUpComicStrip: function() {
			var $firstImage = $( '#comic-strip > img:first' );
			
			$comicStripContainer.css( 'width',  ($comicContainer.width() - 24) );
			
			maxLeftMargin = ($comicStrip.width() - $comicStripContainer.width());
			
			_defaultMoveMargin = 5 * (4 + $firstImage.width() 
							+ comicViewer.convertPixelStringToNumber($firstImage.css( 'border-left-width' ))
							+ comicViewer.convertPixelStringToNumber($firstImage.css( 'border-right-width' ))
							+ comicViewer.convertPixelStringToNumber($firstImage.css( 'margin-left' ))
							+ comicViewer.convertPixelStringToNumber($firstImage.css( 'margin-right' )));
			
			$( '#rightIcon' ).click(function() {
				comicStripLeftMargin = parseInt($comicStrip.css( 'margin-left' ).replace('px', '')) || 0;
				
				// The comic strip is less than the comic container - do not do anything
				//if(comicStripLeftMargin == 0 && $comicStrip.width() < $comicContainer.width()) {
				if(comicStripLeftMargin == 0 && $comicStrip.width() < $comicContainer.width()) {
					moveLeft = false;
					moveRight = true;
				}
				//else if(((comicStripLeftMargin * -1) + ($comicContainer.width() * 2)) < $comicStrip.width()) {
//				else if(((comicStripLeftMargin * -1) + _defaultMoveMargin) < $comicStrip.width()) {
				else if(((comicStripLeftMargin * -1) + $comicContainer.width() + _defaultMoveMargin) < $comicStrip.width()) {
					//_marginLeft = $comicContainer.width();
					_marginLeft = _defaultMoveMargin;
					moveLeft = true;
					moveRight = true;
				}
				else {
					_marginLeft  = maxLeftMargin + parseInt($comicStrip.css( 'margin-left' ).replace('px', '')) || 0;
				}
				if(moveLeft) {
					if((parseInt($comicStrip.css( 'margin-left' ).replace('px', '')) * -1) == maxLeftMargin) {
						moveLeft = false;
						moveRight = true;
					}
					$( '#comic-strip' ).animate( {marginLeft: '-=' + _marginLeft}, 2000);
				}
			});
			
			$( '#leftIcon' ).click(function() {
				comicStripLeftMargin = parseInt($comicStrip.css( 'margin-left' ).replace('px', ''));
				
				// The comic strip is less than the comic container - do not do anything
				if(comicStripLeftMargin == 0) {
					moveLeft = true;
					moveRight = false;
				}
				//else if((comicStripLeftMargin * -1) > $comicContainer.width()) {
				else if((comicStripLeftMargin * -1) > _defaultMoveMargin) {
					//_marginLeft = $comicContainer.width();
					_marginLeft = _defaultMoveMargin;
					moveLeft = true;
					moveRight = true;
				}
				else {
					_marginLeft  = (parseInt($comicStrip.css( 'margin-left' ).replace('px', '')) * -1);
				}
				if(moveRight) {
					if((parseInt($comicStrip.css( 'margin-left' ).replace('px', '')) * -1) == 0) {
						moveRight = false;
						moveLeft = true;
					}
					$( '#comic-strip' ).animate( {marginLeft: '+=' + _marginLeft}, 2000);
				}
			});
			
			$( '#comic-strip > img' ).click(function() {
				$( '#imageViewer' ).html( '' );
				$( '#comic-strip' ).find('.selected').removeClass('selected');
				
				comicViewer.initializeImageViewer($(this));
				$( '#imageViewer' ).focus();
			});
			
			$( document ).keyup(function(e) {
				var selected = $( '#comic-strip' ).find('.selected'),
					image = null,
					$iv = $( '#imageViewer' ),
					_scrollTop = $iv.scrollTop(),
					_defaultScroll = 300;
					_moveScroll = -666;
					_imageHeight = $iv.find( 'img' ).height(),
					_imageSectionHeight = _imageHeight / 3;
					
				if(e.which == 27) {
					if($( '#comic-container' ).is(':visible')) {
						$( '#gallery-icon' ).click();
					}
				}
				// left arrow key
				if(!e.shiftKey && e.which == 37) {
					image = selected.prev();
					if(image.length) {
						image[0].click();
					}
					return;
				}
				// right arrow key
				else if(!e.shiftKey && e.which == 39) {
					image = selected.next();
					if(image.length) {
						image[0].click();
					}
					return;
				}
				
				// left arrow key
				else if(e.shiftKey && e.which == 37) {
					image = selected.prev();
					if(image.length) {
						image[0].click();
					}
					return;
				}
				// right arrow key
				else if(e.shiftKey && e.which == 39) {
					image = selected.next();
					if(image.length) {
						image[0].click();
					}
					return;
				}
				
				// up arrow key
				else if(!e.shiftKey && e.which == 38) {
					$iv.click();
					//_scrollTop = $iv.scrollTop();
					
					if(_scrollTop == 0) {
						e.preventDefault();
						return;
					}
					else if(_scrollTop < _imageSectionHeight) {
						_moveScroll = 0;
						//$iv.scrollTop(0);
					}
					else {
						_moveScroll = (_scrollTop - _imageSectionHeight);
						//$iv.scrollTop(_scrollTop - _imageSectionHeight);
					}
				}
				// down arrow key
				else if(!e.shiftKey && e.which == 40) {
					$iv.click();
					
					if(_scrollTop == _imageHeight) {
						e.preventDefault();
						return;
					}
					else {
						_moveScroll = (_scrollTop + _imageSectionHeight);
						//$iv.scrollTop(_scrollTop + _imageSectionHeight);
					}
				}
				else if(e.shiftKey && e.which == 38) {
					$iv.click();
					
					_moveScroll = (_scrollTop - _defaultScroll);
					//$iv.animate( {scrollTop: (_scrollTop - 50)}, 500 );
					//$iv.scrollTop(_scrollTop - 20);
				}
				else if(e.shiftKey && e.which == 40) {
					$iv.click();
					
					_moveScroll = (_scrollTop + _defaultScroll);
					//$iv.animate( {scrollTop: (_scrollTop + 50)}, 500 );
					//$iv.scrollTop(_scrollTop + 20);
				}
				
				if(_moveScroll != -666) {
					$iv.animate( {scrollTop: _moveScroll}, 500 );
				}
			});
		},
		
		initializeImageViewer: function($image) {
			$image.addClass('selected');
			
			var $imageSrc = $image.attr( 'src' );
			var imageViewerWidth = $( '#imageViewer' ).width();
			$( '#imageViewer' ).html( '<img src="' + $imageSrc + '" />' );
			
			$( '#imageViewer > img' ).width(imageViewerWidth - 4);
			//$originalImage = $( '#imageViewer > img' );
		}
	};
})(jQuery);